<template>
  <div class="job-intention-page">
    <div class="job-intention" :class="classObj">
      <div>
        <i class="icon iconfont iconhangye"></i>
        <div class="job-mov">
          <span>行业</span>
          <span>航天工业，电子商务</span>
        </div>
      </div>
      <div>
        <i class="icon iconfont iconzhiwei"></i>
        <div class="job-mov">
          <span>职位</span>
          <span>web工程师</span>
        </div>
      </div>
      <div>
        <i class="icon iconfont iconshebao"></i>
        <div class="job-mov">
          <span>社保</span>
          <span>有社保</span>
        </div>
      </div>
      <div>
        <i class="icon iconfont iconwangluoguimo"></i>
        <div class="job-mov">
          <span>规模</span>
          <span>200人以上</span>
        </div>
      </div>
      <div>
        <i class="icon iconfont iconchengshi"></i>
        <div class="job-mov">
          <span>城市</span>
          <span>西安</span>
        </div>
      </div>
      <div>
        <i class="icon iconfont iconxinzi1"></i>
        <div class="job-mov">
          <span>薪资</span>
          <span>100K</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'jobIntention',
  computed: {
    ...mapState({
      device: state => state.app.device,
    }),
    classObj() {
      console.log('this.device=', this.device);
      return {
        mobile: this.device === 'mobile',
      };
    },
  },
};
</script>

<style  lang="scss" scoped>
.job-intention-page {
  .job-intention {
    width: auto;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 80%;
    height: 600px;
    margin: 60px auto 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.6);
    & > div {
      width: 33.33333%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: all 0.3s;
      i {
        font-size: 60px;
        margin-bottom: 20px;
        transition: all 0.6s;
        // color: rgba(255, 255, 255, 0.6);
      }
      .job-mov {
        width: 100%;
        height: 20px;
        transform-origin: center center;
        transform: rotateX(0deg);
        transition: all 0.3s;
        position: relative;
        span {
          display: inline-block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          transition: all .3s;
        }
        span:first-child {
          opacity: 1;
        }
        span:last-child {
          transform: rotateX(-180deg);
          opacity: 0;
        }
      }
    }
    & > div:hover {
      color: #ffffff;
      i {
        transform: scale(1.3);
      }
      .job-mov {
        transform: rotateX(-180deg);
        span:first-child {
          opacity: 0;
        }
        span:last-child {
          opacity: 1;
        }
      }
    }
    & > div:nth-child(1),
    & > div:nth-child(2) {
      border-right: 1px solid rgba(255, 255, 255, 0.2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    & > div:nth-child(3) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    & > div:nth-child(4),
    & > div:nth-child(5) {
      border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
    & > div:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}
.job-intention-page {
  .mobile {
    width: 90%;
    height: auto;
    margin: 20px auto 0;
    box-shadow: none;
    justify-content: space-around;
    & > div {
      margin-top: 10px;
      width: 38vw;
      height: 38vw !important;
      margin-bottom: 10px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
      border: none
       i {
        font-size: 40px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
